﻿<template>
    <div class="login">
        <el-form :model="formLogin" :rules="fromLoginRules" ref="formLogin" label-position="left" label-width="0px" class="login-container">
            <h3 class="title">版权云登录</h3>
            <el-form-item prop="account">
                <el-input type="text" v-model="formLogin.account" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="formLogin.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
            <div class="remember-toRegister clear">
                <div class="remember left"><el-checkbox v-model="formLogin.remember">记住密码</el-checkbox></div>
                <div class="toRegister right">还没有账号？立即<router-link to="/register">注册</router-link></div>
            </div>
        </el-form>
    </div>
</template>

<script>
import Heads from "@/components/header";
import Foot from "@/components/footer";

import { mapMutations } from 'vuex'
import { submit } from '@/api';
export default {
    data() {
        return {
            logining: false,
            formLogin: {
                account: '',
                password: '',
                remember: false,
            },
            fromLoginRules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    //{ validator: validaePass }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    //{ validator: validaePass2 }
                ]
            },
        };
    },
    components: {
        Heads,
        Foot
    },
    methods: {
        ...mapMutations([
            'RECORD_croUser',
        ]),
        handleSubmit(ev) {
            this.$refs.formLogin.validate((valid) => {
                if (valid) {
                    //_this.$router.replace('/table');
                    this.logining = true;
                    //NProgress.start();
                    var para = {
                        mobile: this.formLogin.account, 
                        password: this.formLogin.password,
                        remember: this.formLogin.remember?1:0,
                    };
                    submit(para).then(res => {
                        this.logining = false;
                        let { data, msg, sessionid } = res;
                        if (!data) {
                            this.$message.error(msg);
                        } else {
                            let croUser = Object.assign({}, data);
                                croUser.sessionid = sessionid;
                            this.RECORD_croUser(croUser);
                            this.$router.push('/index');
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        // 登录回车事件
        enterLogin() {
            if ($("#text").val() == "") {
                $("#text").focus();
            } else if ($("#password").val() == "") {
                $("#password").focus();
            } else if ($("#text").val() && $("#password").val()) {
                this.login();
            }
        }
    },
};
</script>
<style lang="scss" scoped>
.login {
    width: 1200px;
    margin: 15px auto;
    border: 1px solid #e9e9e9;
    background-color: #fff;
}
.login-container {
	margin: 100px auto;
	width: 350px;
	padding: 35px 35px 15px 35px;
	.title {
		margin: 0px auto 22px auto;
		text-align: center;
		color: #505458;
	}
    .toRegister {
        float: right;
        font-size: 14px;
        line-height: 19px;
        padding-top: 2px;
        a {
            color: #BE1414;
        }
    }
}
</style>
